<template>
	<view class="open-door">
		<view class="open-door-attention">
			<view class="open-door-attention-one">
				<image src="../../static/images/tips.png" mode=""></image>
				<text>注意事项</text>
			</view>
			<view class="open-door-attention-two">1. 在租用教室开始时间{{vuex_config.rent_refund}}小时前，用户可自主取消预约，扣费将原路返回</view>
			<view class="open-door-attention-two">2. 在租用教室开始时间{{vuex_config.unlock_inadvance_min}}分钟前，可进入开锁页面</view>
		</view>
		<view class="open-door-place" v-for="v,i in list" :key="i">
			<view class="open-door-place-tit">
				<view class="open-door-place-tit-left">
					<view class="open-door-place-tit-left-tit">
						<view class="">
							{{v.store.store_name}}
						</view>
						<image src="../../static/images/skip.png" mode="" @click="goRoom(v.room.id)"></image>
					</view>
					<view>{{v.room.room_name}}</view>
					<view>{{moment(v.starttime).format('YYYY/MM/DD HH:mm')}}-{{moment(v.endtime).format('HH:mm')}}
					</view>
				</view>
				<view class="open-door-place-tit-right" @click="goUnlocking(v)">
					<image src="../../static/images/lock.png" mode=""></image>
					<view class="">
						开锁
					</view>
				</view>
			</view>
			<view class="open-door-place-con">
				<view @click="openLocation(v.store.store_latitude,v.store.store_longitude,v.store.store_address)">地图导航
				</view>
				<image src="/static/images/slice.png" mode=""></image>
				<view @click="openGuide(v)">图文指引</view>
				<image src="/static/images/slice.png" mode=""></image>
				<view @click="makePhoneCall(v.store.store_mobile)">客服电话</view>
				<image src="/static/images/slice.png" mode=""></image>
				<view style="position: relative;">
					<text>分享钥匙</text>
					<button open-type="share" class="btnc" @click="share(v)"></button>
				</view>
			</view>
		</view>
		<no-data v-if="!list || list.length === 0" title='暂无预约'></no-data>
		<!-- <view class="open-door-place">
			<view class="open-door-place-tit">
				<view class="open-door-place-tit-left">
					<view class="open-door-place-tit-left-tit">
						<view class="">
							天府广场店
						</view>
						<image src="../../static/images/skip.png" mode=""></image>
					</view>
					<view>70平大教室</view>
					<view>2023/04/20 12:00-13:00</view>
				</view>
				<view class="open-door-place-tit-right">
					<image src="../../static/images/lock.png" mode=""></image>
					<view class="">
						开锁
					</view>
				</view>
			</view>
			<view class="open-door-place-con">
				<view>地图导航</view>
				<text></text>
				<view>图文指引</view>
				<text></text>
				<view @click="openService">客服电话</view>
				<text></text>
				<button class="share" open-type="share">分享钥匙</button>
			</view>
		</view> -->
		<!-- <map style="width: 100%; height: 300px;" id="map"> -->
		</map>
		<u-modal :show="show" :content="content" :show-cancel-button="false" confirmText="我知道了" confirmColor="#606266"
			@confirm="show=false"></u-modal>
		<m-tabbar value='1'></m-tabbar>
	</view>
</template>

<script>
	import mTabbar from '@/components/m-tabbar/index.vue'
	import {
		baseUrl
	} from '@/common/config.js'
	import moment from 'moment'
	import {
		get_my_reservation_api
	} from '@/common/api.js'
	export default {
		data() {
			return {
				// MapContext:uni.createMapContext("map",""),
				list: [],
				moment: moment,
				show: false,
				content: '距离开锁时间还有',
				shareContent: {}
			};
		},
		components: {
			mTabbar
		},
		onShareAppMessage() {
			// const promise = new Promise(resolve => {
			// 	setTimeout(() => {
			// 		resolve({
			// 			title: '自定义转发标题'
			// 		})
			// 	}, 2000)
			// })
			return this.shareContent
		},

		onShow() {
			this.getMyReservation()
		},
		methods: {
			goRoom(id) {
				uni.navigateTo({
					url: `/pages/class-room/class-room?id=${id}`
				})
			},
			share(v) {
				this.shareContent = {
					title: v.room.room_name + ' ' + v.starttime,
					path: `/pages/unlocking/unlocking?id=${v.id}`,
					imageUrl: baseUrl + 'assets/addons/zzyy/image/share_open_door.jpg'
				}
			},
			getMyReservation() {
				get_my_reservation_api().then(res => {
					this.list = res.data
				})
			},
			// 打开地图导航
			openMap() {
				uni.getLocation({
					type: 'gcj02', //返回可以用于wx.openLocation的经纬度
					success(res) {
						const latitude = res.latitude
						const longitude = res.longitude
						uni.openLocation({
							latitude,
							longitude,
							scale: 18
						})
					}
				})
			},
			// 打开图文指引 
			openGuide(v) {
				uni.navigateTo({
					url: `/pages/openDoor/graphicGuide?id=${v.store_id}`
				})
			},
			// 客服电话
			openService() {
				uni.openCustomerServiceChat({
					extInfo: {
						url: ''
					},
					corpId: '',
					success(res) {}
				})
			},
			// 分享
			shareKey() {

			},
			goUnlocking({
				starttime,
				room,
				id
			}) {
				const start = moment(starttime).subtract(this.vuex_config.unlock_inadvance_min, 'm').format(
					'YYYY-MM-DD HH:mm:ss')
				const nowDate = moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
				const diffTime = moment(start).diff(moment(nowDate));
				const duration = moment.duration(moment(start).diff(moment(nowDate)));

				if (moment().isSame(starttime, 'day')) {
					if (moment(start).valueOf() > moment(nowDate).valueOf()) {
						this.show = true
						return this.content =
							`距离${room.room_name} 开锁时间还有${duration.hours()?duration.hours():''}时${duration.minutes()}分${duration.seconds()}秒`
					}
				} else {
					this.show = true
					return this.content = `${room.room_name} 请于${moment(start).format('MM月DD日')}开锁`
				}
				uni.navigateTo({
					url: `/pages/unlocking/unlocking?id=${id}`
				})
			}
		}
	}
</script>

<style lang="scss">
	.open-door {
		box-sizing: border-box;
		padding: 0 24rpx;

		.open-door-attention {
			margin-top: 32rpx;
			margin-bottom: 48rpx;

			.open-door-attention-one {
				display: flex;
				align-items: center;
				margin-bottom: 24rpx;

				image {
					width: 36rpx;
					height: 36rpx;
					margin-right: 16rpx;
				}

				text {
					font-size: 28rpx;
					font-weight: 400;
					color: #606266;
				}
			}

			.open-door-attention-two {
				width: 702rpx;
				font-size: 25rpx;
				font-weight: 300;
				color: #909399;
				line-height: 41rpx;
			}


		}

		.open-door-place {
			width: 702rpx;
			height: 306rpx;
			background: #F3F4F6;
			box-shadow: 0px 20px 13px 1px rgba(70, 133, 116, 0.3);
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			margin-bottom: 36rpx;

			.open-door-place-tit {
				display: flex;
				box-sizing: border-box;
				padding: 24rpx 24rpx 0 24rpx;

				.open-door-place-tit-left {
					overflow: hidden;

					.open-door-place-tit-left-tit {

						display: flex;
						align-items: center;
						font-size: 37rpx;
						font-weight: 500;
						color: #000000;
						height: 58rpx;
						margin-bottom: 15rpx;

						view {
							font-size: 37rpx;
							font-weight: 500;
							color: #000000;
							height: 52rpx;
							margin-bottom: 8rpx;
						}

						image {
							width: 38rpx;
							height: 38rpx;
							margin-left: 20rpx;
						}
					}

					view {
						font-size: 29rpx;
						height: 52rpx;
						line-height: 52rpx;
						font-weight: 400;
						color: #282828;
						margin-bottom: 14rpx;
					}
				}

				.open-door-place-tit-right {
					width: 160rpx;
					height: 160rpx;
					background: #FCFCFC;
					border: 4rpx solid #606266;
					border-radius: 50%;
					text-align: center;
					margin-left: 140rpx;
					margin-top: 10rpx;

					image {
						width: 64rpx;
						height: 64rpx;
						margin-top: 28rpx;
					}

					view {
						font-size: 29rpx;
						font-weight: 400;
						color: #000000;
					}
				}
			}

			.open-door-place-con {
				display: flex;
				height: 80rpx;
				background: #40C6A1;
				margin-top: 10rpx;
				line-height: 80rpx;
				box-sizing: border-box;
				padding: 0 28rpx 0 28rpx;
				border-radius: 0rpx 0rpx 8rpx 8rpx;
				flex-wrap: nowrap;

				.share {
					background-color: transparent;
					color: white;
					width: 120rpx;
					height: 80rpx;
					font-size: 29rpx;
					padding: 0;
				}

				.share::after {
					border: none;
				}

				view {
					font-size: 29rpx;
					font-weight: 400;
					color: #F3F4F6;
				}

				image {
					width: 20rpx;
					height: 80rpx;
					margin: 0 22rpx;
				}
			}
		}
	}

	.btnc {
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		position: absolute;
		border: none;
		z-index: 55;
		background-color: transparent;
		padding: 0;

		&::after {
			border: none;
		}
	}
</style>